<!--
 * @Description  : 管网分段信息  
 * @Author       : zhao
 * @Date         : 2022-10-20 09:15:36
 * @LastEditors  : zhao
 * @LastEditTime : 2022-10-20 09:50:22
-->
<!--  -->
<template>
	<div class="">
		<el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" border>
			<el-table-column type="selection" width="60" align="center"></el-table-column>
			<el-table-column label="所属管线编码" width="120" align="center">
				<template slot-scope="scope">{{ scope.row.pl_base_code }}</template>
			</el-table-column>
			<el-table-column label="分段编码" align="center">
				<template slot-scope="scope">{{ scope.row.code }}</template>
			</el-table-column>
			<el-table-column label="分段外部编码" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.code_extsys }}</template>
			</el-table-column>

			<el-table-column label="名称及序号" width="120" align="center">
				<template slot-scope="scope">{{ scope.row.name }}</template>
			</el-table-column>
			<el-table-column label="位置描述" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.address }}</template>
			</el-table-column>
			<el-table-column label="敷设方式" width="150" align="center">
				<template slot-scope="scope">{{ scope.row.laying_method }}</template>
			</el-table-column>
			<el-table-column label="埋深" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.depth }}</template>
			</el-table-column>
			<el-table-column label="架空" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.height }}</template>
			</el-table-column>
			<el-table-column label="管径" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.diameter }}</template>
			</el-table-column>
			<el-table-column label="壁厚" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.thickness }}</template>
			</el-table-column>
			<el-table-column label="长度" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.length }}</template>
			</el-table-column>
			<el-table-column label="年度" width="100" align="center">
				<template slot-scope="scope">{{ scope.row.cst_date }}</template>
			</el-table-column>
			<el-table-column label="节点编号串" width="100" align="center" prop="nodes" :show-overflow-tooltip="true"> </el-table-column>

			<el-table-column label="操作" width="120" align="center" fixed="right">
				<template slot-scope="scope">
					<p class="handleP">
						<i class="el-icon-document cursor" @click="handleUpdate([scope.row])"></i>
						<i class="el-icon-delete cursor" @click="handleDelete([scope.row])"></i>
					</p>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			style="padding: 20px 10px 0px"
			background
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes,prev, pager, next,jumper"
			:page-size="listQuery.pageSize"
			:page-sizes="[5, 10, 15]"
			:current-page.sync="listQuery.pageIndex"
			:total="total"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			list: [
				{
					pl_base_code: '0215',
					code: '廊坊新奥燃气有限公司',
					code_extsys: '52343222',
					name: 'DP5423434',
					address: '北环线',
					laying_method: '2006-05-23',
					depth: '城镇',
					height: '中压',
					material: '1.24 km',
					diameter: '1.24 km',
					thickness: '1.24 km',
					length: '1.24 km',
					cst_date: '1.24 km',
					nodes: '1.24 km',
				},
			],
			listQuery: {
				pageIndex: 1,
				pageSize: 10,
			},
			loading: true,
			total: 0,
			rowsData: [],
		};
	},

	components: {},

	computed: {},

	mounted() {
		this.getList();
	},

	methods: {
		async getList() {
			this.loading = false;
		},
		handleSizeChange(val) {
			this.listQuery.pageIndex = 1;
			this.listQuery.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.listQuery.pageIndex = val;
			this.getList();
		},
		handleSelectionChange(val) {
			this.rowsData = val;
			if (val.length > 0) {
				this.single = false;
				this.multiple = false;
			} else {
				this.multiple = true;
				this.single = true;
			}
		},
		
		handleUpdate(row) {
			if (row.length > 1) return this.$message({ message: '请选择一条数据', type: 'warning' });
			this.$store.commit('publics/SET_AUCTIONROWDATA', row[0]);
			this.$router.push({ path: '/auction/updata' });
		},

		/** 删除  */
		async handleDelete(data) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const obj = { id: [] };
					data.forEach((e) => obj.id.push(e.id));
					await this.$store.dispatch('auction/DeleteBiddingInfo', obj);
					this.getList();
				})
				.catch(() => {});
		},
	},
};
</script>
<style lang='scss' scoped>
</style>